<template>
  <div class="footer-component">
    <ul class="list">
      <li class="item" @click="router('index')">
        <div class="icon">
          <img class="image" src="/static/images/tab/card.png" alt="">
        </div>
        <div class="title">高端名片</div>
      </li>
      <li class="item" @click="router('user')">
        <div class="icon">
          <img class="image" src="/static/images/tab/user.png" alt="">
        </div>
        <div class="title">我的后台</div>
      </li>
      <li class="item" @click="router('help')">
        <div class="icon">
          <img class="image" src="/static/images/tab/help.png" alt="">
        </div>
        <div class="title">帮助中心</div>
      </li>
      <li class="item" @click="router('openVip')" v-if="!isVip">
        <div class="icon">
          <img class="image" src="/static/images/tab/vip.png" alt="">
        </div>
        <div class="title">开通VIP</div>
      </li>
      <li class="item" @click="router('extension')" v-if="isVip">
        <div class="icon">
          <img class="image" src="/static/images/tab/extension.png" alt="">
        </div>
        <div class="title">推广中心</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    'active': {
      type: String,
      default: 'index'
    },
  },
  data () {
    return {
    }
  },
  computed: {
    isVip () {
      return this.$store.state.isVip;
    },
    currentUrl () {
      return this.$store.state.currentUrl;
    },
  },
  methods: {
    router (route) {
      if (this.currentUrl == route) return;
      this.$store.dispatch('getCurrentUrl', route);
      let url = `/pages/${route}/main`;
      wx.navigateTo({url});
    },
  }
}
</script>

<style scoped lang='scss'>
@import '@/styles/index.scss';

.footer-component {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f7f7fa;
  border-top: 2rpx solid #ddd;
  z-index: 2;

  .list {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    padding: 10rpx 0;

    .item {
      flex: 1;
      text-align: center;

      .icon {
        display: inline-block;
        vertical-align: top;
        width: 56rpx;
        height: 56rpx;
        margin-bottom: 10rpx;

        .image {
          display: inline-block;
          vertical-align: top;
          width: 100%;
          height: 100%;
        }

        .on {
          display: none;
        }
      }

      .title {
        font-size: $fsm;
        color: $fc;
      }
    }
  }
}
</style>
